<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <!-- 左边导航栏 -->
        <el-menu
          :collapse="isCollapse"
          active-text-color="#ffd04b"
          background-color="#545c64"
          router
          class="el-menu-admin"
          default-active="2"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <!--  嵌套的导航 -->
          <el-sub-menu index="1-4">
            <template #title>
              <el-icon>
                <Location />
              </el-icon>

              <span>item four</span>
            </template>
            <el-menu-item index="1-4-1">用户</el-menu-item>
            <el-menu-item index="1-4-2">新闻</el-menu-item>
          </el-sub-menu>

          <!-- 单一的导航 -->
          <el-menu-item index="/set">
            <el-icon>
              <setting />
            </el-icon>
            <span>设置中心</span>
          </el-menu-item>

          <el-menu-item index="/user">
            <el-icon>
              <Avatar />
            </el-icon>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <!--   权限管理菜单 -->
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Location />
              </el-icon>

              <span>权限管理</span>
            </template>
            <el-menu-item index="rights">
              <el-icon>
                <Location />
              </el-icon>
              <span>权限列表</span>
            </el-menu-item>
            <el-menu-item index="roles">
              <el-icon>
                <Location />
              </el-icon>
              <span>角色列表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!-- @click="toggleCollapse" -->
          <el-icon class="toggle-btn" @click="toggleCollapse">
            <Operation />
          </el-icon>
          <div class="system-title">电商后台管理系统</div>
          <div>
            <span class="welcome"> 您好，{{ $store.state.username }} </span>
            <!-- @click="logout" -->
            <el-button type="text" @click="logout">退出</el-button>
          </div>
        </el-header>
        <el-main>
          <!--  主题内容渲染  子组件渲染的内容 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
// 引入小图标
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Operation,
} from '@element-plus/icons-vue'

import { ref } from 'vue'

import { clearToken } from '@/utils/lib'

import { useRouter } from 'vue-router'
const router = useRouter()

const isCollapse = ref(false)

//导航栏展开跟折叠功能
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 嵌套的导航打开的时候触发
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
// 关闭的时候触发
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

// 退出功能逻辑
// 1 清空token
// 2 跳转到登陆页面
const logout = () => {
  clearToken()
  setTimeout(() => {
    router.replace('/login')
  }, 1000)
}
</script>

<style scoped lang="scss">
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//     width: 200px;
//     min-height: 400px;
// }

.home {
  height: 100%;

  .el-menu-admin:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-container {
    height: 100%;
  }

  .el-aside {
    background-color: #545c64;
  }

  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #545c64;
  }

  .el-main {
    width: 100%;
  }

  .logo {
    height: 60px;
    background: url(../assets/logo.png);
    background-size: cover;
    background-color: #989898;
  }

  .toggle-btn {
    font-size: 36px;
    color: #989898;
    cursor: pointer;
    line-height: 60px;
  }

  .system-title {
    font-size: 28px;
    color: white;
  }

  .logout-btn {
    color: orange;
  }
}
</style>
